<template>
  <div>
    <div class="details_box" v-if="goodsData">
      <div class="details_head">
        <div class="left">
          <span
            class="iconfont icon-jiantou-left"
            @click="$router.go(-1)"
          ></span>
        </div>
        <div class="right">
          <span class="iconfont icon-kefu"></span>
          <span class="iconfont icon-fenxiang"></span>
          <span class="iconfont icon-qiugou1"></span>
        </div>
      </div>
      <div class="details_img">
        <van-swipe
          class="my-swipe"
          :autoplay="3000"
          indicator-color="white"
          @change="onChange"
        >
          <van-swipe-item
            v-for="(item, index) in goodsData.goods_img"
            :key="index"
          >
            <img :src="item" />
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">{{ current + 1 }}/4</div>
          </template>
        </van-swipe>
      </div>
      <!-- 其他鞋款 -->
      <!-- <div class="details_all">
        <div class="all_box all_con">
          <img
            src="https://img0.baidu.com/it/u=1130343516,1159641495&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=529"
          />
        </div>
        <div class="all_box">
          <img
            src="https://img0.baidu.com/it/u=1130343516,1159641495&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=529"
          />
        </div>
        <div class="all_box">
          <img
            src="https://img0.baidu.com/it/u=1130343516,1159641495&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=529"
          />
        </div>
      </div> -->
      <div class="details_price">
        <div class="price_box">
          <div class="box">
            <h3><span>￥</span>{{ goodsData.goods_price }}</h3>
            <span class="right">{{ goodsData.goods_price_num }}人付款</span>
          </div>
          <div class="box">
            <div class="span">支持花呗分期付款每期只需26.8元</div>
            <div class="iconfont icon-jiantou-right-copy span"></div>
          </div>
          <div class="test">
            <p>{{ goodsData.goods_test }}</p>
          </div>
        </div>
      </div>
      <div class="details_logo">
        <img src="../assets/imgs/商品详情.png" alt="" />
      </div>
      <div class="details_comment">
        <van-cell @click="showPopup">
          <div class="box">
            <p>相关评论</p>
            <span class="iconfont icon-jiantou-right-copy"></span>
          </div>
        </van-cell>
        <van-popup
          v-model="show"
          class="user_comment"
          position="bottom"
          :style="{ height: '70%' }"
          name="test"
        >
          <div
            class="user_box"
            v-for="(item, index) in goodsData.goods_user_comment"
            :key="index"
          >
            <div class="user">
              <div class="img">
                <img :src="item.user_img" />
              </div>
              <div class="user_name">{{ item.user_name }}</div>
            </div>
            <div class="user_test">
              <p>{{ item.user_test }}</p>
              <span
                class="iconfont icon-dianzan"
                @click="giveUp(index)"
                v-show="!item.fabulous"
              ></span>
              <span
                class="iconfont icon-dianzan1"
                @click="giveDwon(index)"
                v-show="item.fabulous"
              ></span>
            </div>
          </div>
          <div class="comment">
            <input
              type="text"
              placeholder="说点什么吧。。。。。"
              v-model="test"
            />
            <div @click="report">发表</div>
          </div>
        </van-popup>
      </div>
      <div class="details_commodity">
        <h4>商品详情</h4>
        <img
          v-for="(item, index) in goodsData.goods_details"
          :key="index"
          v-lazy="item"
          style="width: 100%"
        />
      </div>
      <div class="details_size">
        <h4>尺码对照</h4>
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fassets.xssml.com%2Fupload%2Ffile-1589901239729.png&refer=http%3A%2F%2Fassets.xssml.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643890379&t=734a949d794199cfe77065147fd4e760"
          style="width: 100%"
        />
      </div>
      <div class="details_commodity">
        <h4>为你推荐</h4>
      </div>
      <div class="commodity_box">
        <div
          class="commodity"
          v-for="(item, index) in goodsLists"
          :key="index"
          @click="$router.push('/shopping/details?id=' + item.goods_id)"
          v-show="item.goods_id != id"
        >
          <div class="commodity_img">
            <img :src="item.goods_img" />
          </div>
          <div class="commodity_text">
            <p class="p">{{ item.goods_test }}</p>
            <div class="price">
              <span class="price_left">￥{{ item.goods_price }}</span
              ><span class="price_right">{{ item.goods_price_num }}人付款</span>
            </div>
          </div>
        </div>
      </div>
      <div class="details_bottom">
        <div class="box" @click="collections">
          <span class="iconfont icon-shoucang" v-show="!collection"></span>
          <span class="iconfont icon-shoucang1" v-show="collection"></span>
          <p>收藏</p>
        </div>
        <div class="collection">出售</div>
        <div class="purchase" @click="showPopupTwo">立即购买</div>
        <van-popup
          v-model="show02"
          position="bottom"
          :style="{ height: '60%' }"
          :class="'details_goods'"
        >
          <div class="top">
            <div class="img">
              <img :src="goodsData.goods_img" />
            </div>
            <div class="top_right">
              <div class="box">
                <div class="price">
                  <p><span>￥</span>{{ price }}</p>
                </div>
                <div class="no" @click="show02 = false">
                  <span class="iconfont icon-cancel-1-copy"></span>
                </div>
              </div>
              <div class="box">
                <div class="left">
                  <span class="iconfont icon-tubiaozhizuomoban1"></span
                  ><span class="test">已选 {{ code }}</span>
                </div>
                <div class="right">
                  <p>到货时间的①</p>
                </div>
              </div>
            </div>
          </div>
          <div class="choice">
            <div
              v-for="(item, index) in goodsData.goods_other"
              :key="index"
              :class="['choice_box', { choice_con: num == index }]"
              @click="num = index"
            >
              <p>{{ item.goods_code }}</p>
              <span>￥{{ item.goods_price }}</span>
            </div>
          </div>
          <div class="bottom">
            <div :class="['box', { box_con: number == 0 }]" @click="goto(0)">
              <div class="right">
                <p>闪电直发</p>
              </div>
              <div class="price">
                <p>￥{{ price + 20 }}</p>
                <span>|</span>
                <p class="time">约2天到达</p>
              </div>
            </div>
            <div :class="['box', { box_con: number == 1 }]" @click="goto(1)">
              <div class="right">
                <p>普通发货</p>
              </div>
              <div class="price">
                <p>￥{{ price }}</p>
                <span>|</span>
                <p class="time">约6-7天到达</p>
              </div>
            </div>
            <van-loading
              v-show="flag"
              size="24px"
              vertical
              class="reding"
              color="#000"
              >加载中</van-loading
            >
          </div>
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { Toast } from "vant";
export default {
  data: function () {
    return {
      current: 0,
      goodsData: null, //商品信息
      goodsLists: [], //推荐商品
      show: false,
      show02: false,
      price: null, //商品价格
      code: null, //鞋码
      number: 0, //选择快递
      num: 0,
      flag: false,
      id: null, //当前产品id
      collection: false, //收藏
      test: "", //输入框的内容
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    //相关评论弹出层
    showPopup() {
      this.show = true;
    },
    //发表评论
    report() {
      //判断是否登录
      let token = sessionStorage.getItem("token");
      if (token) {
        //获取我的用户信息
        let user = sessionStorage.getItem("user");
        user = JSON.parse(user);
        if (this.test) {
          this.goodsData.goods_user_comment.push({
            user_name: user.name,
            user_img: user.user_img,
            user_test: this.test,
            fabulous:false
          });
        } else {
           Toast("文本不能为空");
        }
      } else {
        this.$router.push("/login");
      }
    },
    //点赞
    giveUp(index) {
      //判断是否登录
      let token = sessionStorage.getItem("token");
      if (token) {
        this.goodsData.goods_user_comment[index].fabulous = true;
        Toast("点赞成功");
      } else {
        this.$router.push("/login");
      }
    },
    //取消点赞
    giveDwon(index) {
      //判断是否登录
      let token = sessionStorage.getItem("token");
      if (token) {
        this.goodsData.goods_user_comment[index].fabulous = false;
        Toast("取消点赞");
      } else {
        this.$router.push("/login");
      }
    },
    //购买类型
    showPopupTwo() {
      this.show02 = true;
      this.price = this.goodsData.goods_other[0].goods_price;
      this.code = this.goodsData.goods_other[0].goods_code;
    },
    // 前往下单页面
    goto(index) {
      this.number = index;
      this.flag = true;
      setTimeout(() => {
        this.$router.push("/order");
        this.flag = false;
      }, 1000);
      let express = index == 0 ? "京东快递" : "韵达快递";
      let postage = index == 0 ? "20.00" : "8.00";
      let i = this.goodsData.goods_other.findIndex((item) => {
        return item.goods_code == this.code;
      });
      let commodity = {
        goods_id: this.goodsData.goods_id,
        goods_test: this.goodsData.goods_test,
        goods_price: this.price,
        goods_express: express,
        goods_img: this.goodsData.goods_img[0],
        goods_code: this.code,
        goods_num: index,
        goods_postage: postage,
        goods_cid: this.goodsData.goods_other[i].cid,
        purchase: 1,
      };
      window.sessionStorage.setItem("commodity", JSON.stringify(commodity)); // JSON.stringify();将对象转换为 JSON 字符串

      //添加状态判断地址是否返回
      sessionStorage.setItem("addres", 1);
    },
    collections() {
      //判断是否登录
      let token = sessionStorage.getItem("token");
      if (!token) {
        Dialog.confirm({
          title: "未登录无法收藏是否前往登录",
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {});
      } else {
        //收藏
        this.collection = !this.collection;
      }
    },
  },
  created() {
    this.id = this.$route.query.id;
    this.$http.get("/static/goodsdata.json").then((item) => {
      let i = item.data.findIndex((item) => {
        return item.goods_id == this.$route.query.id;
      });
      this.goodsData = item.data[i];

      //获取该物品是否有收藏
      let collection = sessionStorage.getItem("collection");
      if (collection) {
        let lists = JSON.parse(collection);
        let index = lists.findIndex((item) => {
          return item.goods_id == this.goodsData.goods_id;
        });
        if (index != -1) {
          this.collection = true;
        } else {
          this.collection = false;
        }
      }
    });
    this.$http.get("/static/recommendgoods.json").then((item) => {
      this.goodsLists = item.data;
    });
  },
  destroyed() {
    //卸载前判断是否有收藏如果有就载入
    if (this.collection == true) {
      let collection = sessionStorage.getItem("collection");
      if (collection) {
        let lists = JSON.parse(collection);
        let i = lists.findIndex((item) => {
          return item.goods_id == this.goodsData.goods_id;
        });
        if (i == -1) {
          lists.push(this.goodsData);
          sessionStorage.setItem("collection", JSON.stringify(lists));
        }
      } else {
        let arr = [];
        arr.push(this.goodsData);
        sessionStorage.setItem("collection", JSON.stringify(arr));
      }
    } else {
      let collection = sessionStorage.getItem("collection");
      if (collection) {
        let lists = JSON.parse(collection);
        let i = lists.findIndex((item) => {
          return item.goods_id == this.goodsData.goods_id;
        });
        if (i != -1) {
          lists.splice(i, 1);
          sessionStorage.setItem("collection", JSON.stringify(lists));
        } else {
          return;
        }
      }
    }
  },
  watch: {
    num() {
      this.price = this.goodsData.goods_other[this.num].goods_price;
      this.code = this.goodsData.goods_other[this.num].goods_code;
    },
    "$route.query"() {
      location.reload();
    },
  },
};
</script>

<style lang="less">
.details_box {
  padding-bottom: 50px;
  .details_head {
    padding: 10px 15px;
    background-color: #fff;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    .right {
      display: flex;
      align-items: center;
      span:nth-child(2) {
        padding: 0 20px;
        font-size: 14px;
      }
    }
  }
  .details_img {
    background-color: #fff;
    position: relative;
    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
    }
    img {
      width: 100%;
      height: 325px;
    }
  }
  .details_all {
    padding: 0 10px;
    display: flex;
    .all_box {
      width: 50px;
      height: 40px;
      margin-left: 7px;
      box-sizing: border-box;
      overflow: hidden;
      img {
        width: 50px;
        height: 40px;
      }
    }
    .all_con {
      border: 2px solid #474749;
    }
  }
  .details_price {
    padding: 0 10px;
    margin-top: 10px;
    .price_box {
      background-color: #fff;
      border-radius: 5px;
      .box:first-child {
        padding-top: 16px;
      }
      .box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        h3 {
          font-size: 20px;
          font-weight: bold;
          span {
            font-size: 14px;
          }
        }
        .right,
        .span {
          display: inline-block;
          font-size: 12px;
          transform: scale(0.8);
          color: #c7c6cd;
        }
        .span {
          transform: translateX(0);
        }
        .span:last-child {
          transform: translateX(-5px);
        }
      }
      .test {
        padding: 10px 10px 15px;
        font-size: 14px;
        p {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }
  }
  .details_logo {
    img {
      width: 100%;
    }
  }
  .details_comment {
    padding: 0 10px;
    .van-cell {
      padding: 0;
    }
    .box {
      background-color: #fff;
      border-radius: 3px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      font-size: 12px;
      color: #b0b0b2;
      span {
        display: inline-block;
        transform: scale(0.8);
      }
    }
    .user_comment {
      box-sizing: border-box;
      padding: 10px 20px;
      font-size: 12px;
      .user {
        display: flex;
        align-items: center;
        .img {
          width: 25px;
          height: 25px;
          border-radius: 100%;
          overflow: hidden;
          img {
            width: 100%;
          }
        }
        .user_name {
          padding-left: 10px;
        }
      }
      .user_test {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        p {
          width: 90%;
        }
      }
    }
    .comment {
      width: 100%;
      position: fixed;
      bottom: 10px;
      left: 20px;
      display: flex;
      input {
        width: 75%;
        border: 0;
        background-color: #ecebeb;
        height: 20px;
        border-radius: 10px;
        padding-left: 10px;
      }
      div {
        padding-left: 10px;
      }
    }
  }
  .details_commodity {
    padding: 0 10px;
    background-color: #fff;
    h4 {
      padding: 5px 10px;
    }
  }
  .details_size {
    margin-top: 10px;
    padding: 0 10px;
    background-color: #fff;
    h4 {
      padding: 5px 10px;
    }
  }
  .details_commodity {
    margin-top: 10px;
    background-color: #fff;
    text-align: center;
  }
  .commodity_box {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    .commodity {
      width: 50%;
      background-color: #fff;
      .commodity_img {
        display: flex;
        justify-content: center;
        align-content: center;
        img {
          width: 100%;
        }
      }
      .commodity_text {
        .p {
          padding: 0px 15px;
          font-size: 12px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .price {
          display: flex;
          justify-content: space-between;
          padding: 10px 15px 15px;
          font-size: 12px;
          .price_left {
            font-weight: bold;
          }
          .price_right {
            transform: scale(0.9);
            color: #b0b0b2;
          }
        }
      }
    }
  }
  .details_bottom {
    background-color: #fff;
    padding: 9px 10px 9px 20px;
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .box {
      text-align: center;
      font-size: 12px;
      p {
        transform: scale(0.8);
      }
    }
    .collection {
      box-sizing: border-box;
      line-height: 40px;
      width: 80px;
      height: 40px;
      text-align: center;
      border: 2px solid #e3e3e3;
      border-radius: 3px;
    }
    .details_goods {
      background-color: #fafafc;
      .top {
        background-color: #fff;
        padding: 5px 10px;
        display: flex;
        .img {
          width: 80px;
          height: 80px;
          border: 2px solid #fbfbfb;
          border-radius: 5px;
          overflow: hidden;
          box-sizing: border-box;
          img {
            width: 80px;
            height: 80px;
          }
        }
        .top_right {
          flex: 1;
          .box {
            padding-left: 15px;
            padding-right: 5px;
            display: flex;
            justify-content: space-between;
            .price {
              padding-top: 20px;
              span {
                font-size: 14px;
                font-weight: bold;
              }
              p {
                font-size: 20px;
                font-weight: bold;
              }
            }
            .no {
              span {
                display: inline-block;
                padding-top: 20px;
                font-size: 14px;
                color: #b0b0b2;
              }
            }
            .left {
              padding-top: 10px;
              color: #98979c;
              span {
                font-size: 12px;
              }
              .test {
                padding-left: 5px;
              }
            }
            .right {
              color: #98979c;
              padding-top: 10px;
            }
          }
        }
      }
      .choice {
        padding: 5px 10px;
        display: flex;
        .choice_box {
          width: 75px;
          height: 75px;
          border-radius: 5px;
          background-color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          border: 3px solid transparent;
          margin-left: 5px;
          p {
            font-size: 18px;
            font-weight: bold;
          }
          span {
            font-size: 12px;
            color: #b0b0b2;
          }
        }
        .choice_con {
          border: 3px solid #000;
        }
      }
      .bottom {
        width: 100%;
        background-color: #fff;
        padding: 5px 10px;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-evenly;
        .box {
          width: 130px;
          height: 55px;
          background-color: #2a2a34;
          position: relative;
          .right {
            position: absolute;
            right: -5px;
            left: 0;
            text-align: right;
            p {
              display: inline-block;
              background-color: rgba(212, 213, 225, 0.5);
              color: #fff;
              padding: 0 3px;
              font-size: 12px;
            }
          }
          .price {
            display: flex;
            color: #fff;
            line-height: 55px;
            justify-content: center;
            p {
              font-weight: bold;
              font-size: 18px;
            }
            .time {
              font-size: 12px;
            }
          }
        }
        .box_con {
          background-color: #00c2c2;
        }
      }
    }
    .purchase {
      width: 216px;
      height: 40px;
      background-color: #00cbcc;
      color: #fff;
      border-radius: 3px;
      text-align: center;
      line-height: 40px;
    }
    .reding {
      position: fixed;
      top: 70%;
      left: 45%;
    }
  }
}
</style>